2.2 布局详解

pack 布局

使用 pack布局，将向容器中添加组件，第一个添加的组件在最上方，然后是依次向下添加。当pack布局不设置属性时，它只会占用能容纳下当前组件的最小空间

pack布局区分以下三种空间

• 所属不明的，无人认领的空间

• 要求但未使用的空间

• 要求并已使用的空间

展开属性expand

“拉手效果布局”

import tkinter as tk

root = tk.Tk()

tk.Button(root, text="A").pack(side=tk.LEFT, expand=1)
tk.Button(root, text="B").pack(side=tk.LEFT, expand=1)
tk.Button(root, text="C").pack(side=tk.LEFT, expand=1)

root.mainloop()

综合示例

import tkinter as tk

root = tk.Tk()
frame = tk.Frame(root)

tk.Label(frame, text="Pack 布局的 side 和 fill").pack()
tk.Button(frame, text="A").pack(side=tk.LEFT, fill=tk.Y)
tk.Button(frame, text="B").pack(side=tk.TOP, fill=tk.X)
tk.Button(frame, text="C").pack(side=tk.RIGHT, fill=tk.NONE)
tk.Button(frame, text="D").pack(side=tk.TOP, fill=tk.BOTH)

# 需注意，顶部框架不会展开，也不会填充X或Y方向
frame.pack()

tk.Label(root, text="Pack 布局的 expand").pack()
tk.Button(root, text="我不扩展").pack()
tk.Button(root, text="我不向x方向填充，但我扩展").pack(expand=1)
tk.Button(root, text="我向x方向填充，并且扩展").pack(fill=tk.X, expand=1)

root.mainloop()

expand和fill属性有什么区别？ 相信绝大多数初次学习tkinter的人都会对这两个属性困惑，其实这两个属性是明显不同的，expand对应的正是要求但未使用的空间，而fill对应的是要求并已使用的空间。fill是填满的意思，将所有要求的空间占满。

pack常用属性

注意：上表中取值都是常量，YES等价于"yes"，亦可以直接传入字符串值。另外当界面复杂度增加时，要实现某种布局效果，需要分层来实现。

from tkinter import *

root = Tk()

# 使用Frame增加一层容器
fm1 = Frame(root)

Button(fm1, text='Top').pack(side=TOP, anchor=W, fill=X, expand=YES)
Button(fm1, text='Center').pack(side=TOP, anchor=W, fill=X, expand=YES)
Button(fm1, text='Bottom').pack(side=TOP, anchor=W, fill=X, expand=YES)
fm1.pack(side=LEFT, fill=BOTH, expand=YES)

fm2 = Frame(root)
Button(fm2, text='Left').pack(side=LEFT)
Button(fm2, text='This is the Center button').pack(side=LEFT)
Button(fm2, text='Right').pack(side=LEFT)
fm2.pack(side=LEFT, padx=10)


root.mainloop()

pack函数

grid 布局

又被称作网格布局，是最被推荐使用的布局。程序大多数都是矩形的界面，我们可以很容易把它划分为一个几行几列的网格，然后根据行号和列号，将组件放置于网格之中。使用grid 布局时，需要在里面指定两个参数，分别用row 表示行，column 表示列。需要注意的是 row 和 column 的序号都从0 开始，且每个网格只能容纳一个窗口小控件。

网格布局直观感受

from tkinter import *

root = Tk()

Label(root, width=15, height=3, bg="red").grid(row=0, column=0)
Label(root, width=15, height=3, bg="green").grid(row=0, column=1)
Label(root, width=15, height=3, bg="blue").grid(row=0, column=2)
Label(root, width=15, height=3, bg="white").grid(row=1, column=0)
Label(root, width=15, height=3, bg="black").grid(row=1, column=1)
Label(root, width=15, height=3, bg="grey").grid(row=1, column=2)

root.mainloop()

使用grid布局前，要打好腹稿，将界面划分成网格状

实例

import tkinter as tk

root = tk.Tk()
tk.Label(root, text="账号").grid(row=0, sticky=tk.W)
tk.Label(root, text="密码").grid(row=1, sticky=tk.W)
tk.Entry(root).grid(row=0, column=1, sticky=tk.E)
tk.Entry(root).grid(row=1, column=1, sticky=tk.E)
tk.Button(root, text="Login").grid(row=2, column=1, sticky=tk.E)
root.mainloop()

要注意，每列的宽度（或每行的高度）由网格中小部件的高度或宽度决定。如果需要额外的设置，只能通过设置网格中的小部件的宽度实现。 另外，可以使用sticky = tk.NSEW参数使小部件可扩展并填充网格的整个单元格。

在tkinter的官方文档中，并没有给出让grid布局适配根窗口拉伸的方法，但是通过查阅tcl/Tk的文档，可知设置权重能满足该需求。

# 第一个参数是想要设置的列的序号
root.grid_columnconfigure(1, weight=1)

# 用于设置行
# root.grid_rowconfigure(1, weight=1)

grid属性设置

关于sticky属性，还有一些组合用法

将小控件放置在单元格的一角

• sticky=tk.NE 右上角

• sticky=tk.SE 右下角

• sticky=tk.SW 左下角

• sticky=tk.NW 左上角

拉伸小控件

• sticky=tk.N+tk.S 垂直拉伸小控件，并保持水平居中，其等价于字符串值"ns"，以下同

• sticky=tk.E+tk.W 水平拉伸且持垂直居中

• sticky=tk.N+tk.E+tk.S+tk.W 水平和垂直拉伸，等价于常量tk.NSEW和字符串值nsew

• sticky=tk.N+tk.S+tk.W 将垂直拉伸并向西（左）对齐

grid函数

grid布局配合使用单元格的合并，可以设计出复杂的界面

复杂示例

import tkinter as tk

parent = tk.Tk()
parent.title('Find & Replace')

tk.Label(parent, text="Find:").grid(row=0, column=0, sticky='e')
tk.Entry(parent, width=60).grid(row=0, column=1, padx=2, pady=2, sticky='we', columnspan=9)

tk.Label(parent, text="Replace:").grid(row=1, column=0, sticky='e')
tk.Entry(parent).grid(row=1, column=1, padx=2, pady=2, sticky='we', columnspan=9)

tk.Button(parent, text="Find").grid(row=0, column=10, sticky='e' + 'w', padx=2, pady=2)
tk.Button(parent, text="Find All").grid(row=1, column=10, sticky='e' + 'w', padx=2)
tk.Button(parent, text="Replace").grid(row=2, column=10, sticky='e' + 'w', padx=2)
tk.Button(parent, text="Replace All").grid(row=3, column=10, sticky='e' + 'w', padx=2)

tk.Checkbutton(parent, text='Match whole word only ').grid(row=2, column=1, columnspan=4, sticky='w')
tk.Checkbutton(parent, text='Match Case').grid(row=3, column=1, columnspan=4, sticky='w')
tk.Checkbutton(parent, text='Wrap around').grid(row=4, column=1, columnspan=4, sticky='w')

tk.Label(parent, text="Direction:").grid(row=2, column=6, sticky='w')
tk.Radiobutton(parent, text='Up', value=1).grid(row=3, column=6, columnspan=6, sticky='w')
tk.Radiobutton(parent, text='Down', value=2).grid(row=3, column=7, columnspan=2, sticky='e')

parent.mainloop()

place 布局

place布局 最简单最灵活的一种布局，使用组件坐标来放置组件的位置。但是不太推荐使用，在不同分辨率下，界面往往有较大差异。

place属性设置

place函数